import { JSX } from 'react'
// ========== 表单 ==========

/**
 * @description 表单字段类型
 */
export type FormItemType = 'textarea' | 'input' | 'datePicker' | 'switch' | 'colorSelector' | 'selector'
/**
 * @description 表单 FormItem 的参数
 * @param {Array} rules - 表单验证规则
 * @param {string} tooltip.message - 提示信息
 * @param {string} intro - 表单左侧标签名称
 */
export type FormItemPropsType = {
  rules?: any[]
  tooltip?: {
    message: string
  },
  intro?: string
  initialValue?: any
}
/**
 * @description 表单字段所需参数
 */
export type FormFieldPropsType = TextAreaPropsType | InputPropsType | DatePickerPropsType | SwitchPropsType |
  ColorSelectorPropsType | SelectorPropsType

/**
 * @description formListItem 参数类型
 * @param {string} label - 表单左侧标签名称-例如:用户名
 * @param {string} name - 表单name-例如:username
 * @param {FormItemPropsType} formItemProps - 表单 FormItem 的参数
 * @param {TextAreaPropsType} formFieldProps - 文本域参数
 */
export type FormListItemType = FormInputItemPropsType | FormTextareaItemPropsType | FormDatePickerItemPropsType |
  FormSwitchItemPropsType | FormColorSelectorItemPropsType | FormSelectorItemPropsType

export type FormInputItemPropsType = {
  type: 'input'
  name: string
  label: string
  formItemProps?: Expand<FormItemPropsType>
  formFieldProps?: Expand<InputPropsType>
}
export type FormTextareaItemPropsType = {
  type: 'textarea'
  name: string
  label: string
  formItemProps?: Expand<FormItemPropsType>
  formFieldProps?: Expand<TextAreaPropsType>
}
export type FormDatePickerItemPropsType = {
  type: 'datePicker'
  name: string
  label: string
  formItemProps?: Expand<FormItemPropsType>
  formFieldProps?: Expand<DatePickerPropsType>
}
export type FormSwitchItemPropsType = {
  type: 'switch'
  name: string
  label: string
  formItemProps?: Expand<FormItemPropsType>
  formFieldProps?: Expand<SwitchPropsType>
}
export type FormColorSelectorItemPropsType = {
  type: 'colorSelector'
  name: string
  label: string
  formItemProps?: Expand<FormItemPropsType>
  formFieldProps?: Expand<ColorSelectorPropsType>
}
export type FormSelectorItemPropsType = {
  type: 'selector'
  name: string
  label: string
  formItemProps?: Expand<FormItemPropsType>
  formFieldProps?: Expand<SelectorPropsType>
}

/**
 * @description formList 参数类型
 */
export type FormListType = Expand<FormListItemType>[]

// ======== 文本域 ========
/**
 * @description 文本域参数
 * @param {string} label - 表单左侧标签名称-例如:用户名
 * @param {string} name - 表单name-例如:username
 * @param {string} value - 表单value-例如:zhangsan
 * @param {Function} onChange - 表单value改变时的回调函数 表单组件自动传入并触发
 * @param {number} maxLength - 最大长度
 * @param {number} rows - 行数
 * @param {boolean | object} autoSize - 是否自动调整高度 支持布尔值和对象 { maxHeight: 200, minHeight: 100 }
 * @param {string} placeholder - 占位符 例如: 请输入用户名 默认为 请输入 + label
 * @param {boolean | Function} showWordLimit - 是否显示字数统计 默认为 true ;支持传入函数，返回 ReactNode
 */
export type TextAreaPropsType = {
  label?: string
  name?: string
  value?: string
  onChange?: (value: string) => void
  maxLength?: number
  rows?: number
  autoSize?: boolean | object
  placeholder?: string
  showCount?: boolean
  disabled?: boolean
  readOnly?: boolean
  clearable?: boolean
  clearIcon?: React.ReactNode
  clearTrigger?: 'always' | 'focus'
  className?: string
  ohtherProps?: any
}

// ======== 输入框 ========
/**
 * @description 输入框参数
 * @param {string} label - 表单左侧标签名称-例如:用户名
 * @param {string} name - 表单name-例如:username
 * @param {string} value - 表单value-例如:zhangsan
 * @param {Function} onChange - 表单value改变时的回调函数 表单组件自动传入并触发
 * @param {number} maxLength - 最大长度
 * @param {number} rows - 行数
 * @param {boolean | object} autoSize - 是否自动调整高度 支持布尔值和对象 { maxHeight: 200, minHeight: 100 }
 * @param {string} placeholder - 占位符 例如: 请输入用户名 默认为 请输入 + label
 * @param {boolean | Function} showWordLimit - 是否显示字数统计 默认为 true ;支持传入函数，返回 ReactNode
 */
export type InputPropsType = {
  label?: string
  name?: string
  value?: string
  type?: 'tel' | 'digit' | 'number' | 'textarea' | 'password'
  onChange?: (value: string) => void
  maxLength?: number
  rows?: number
  autoSize?: boolean | object
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
  clearable?: boolean
  clearIcon?: React.ReactNode
  clearTrigger?: 'always' | 'focus'
  align?: 'left' | 'right' | 'center'
  prefix?: React.ReactNode
  suffix?: React.ReactNode
  className?: string
  ohtherProps?: any
}

// ======== 日期选择器 ========
/**
 * @description 日期选择器参数
 * @param {string} label - 表单左侧标签名称-例如:用户名
 * @param {string} name - 表单name-例如:username
 * @param {string} value - 表单value-例如:zhangsan
 * @param {Function} onChange - 表单value改变时的回调函数 表单组件自动传入并触发
 * @param {string} placeholder - 占位符 例如: 请输入用户名 默认为 请输入 + label
 */
export type DatePickerPropsType = {
  label?: string
  name?: string
  value?: string | [string, string] | Date | [Date, Date] | null | undefined
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
  clearable?: boolean
  clearIcon?: React.ReactNode
  className?: string
  ohtherProps?: any
  format?: string
  mutiple?: boolean
  noFormat?: boolean
  onChange?: (value: string | [string, string] | Date | [Date, Date] | null | undefined) => void
}

// ======== 开关 ========
export type SwitchPropsType = {
  label?: string
  name?: string
  value?: boolean
  disabled?: boolean
  readOnly?: boolean
  className?: string
  ohtherProps?: any
  uncheckedText?: string | React.ReactNode
  checkedText?: string | React.ReactNode
  onChange?: (value: boolean) => void
}

// ======== 颜色选择器 ========
export type ColorSelectorPropsType = {
  label?: string
  name?: string
  value?: boolean
  disabled?: boolean
  readOnly?: boolean
  className?: string
  ohtherProps?: any
  options?: any[]
  onChange?: (value: boolean) => void
}

// ======== 选择器 ========
export type SelectorPropsType = {
  label?: string
  name?: string
  value?: string
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
  className?: string
  ohtherProps?: any
  options?: any[]
  onChange?: (value: string) => void
}

// ========== 可配置表单 ==========
export type VariableFormListItemType = {
  formListName: string
  formListData: any[] | Promise<any[]>
  renderFormItem: (
    { formFieldName, add, remove, restFields }: {
      formFieldName: string | number,
      add: (defaultValue?: any, insertIndex?: number) => void,
      remove: (index: number | number[]) => void,
      restFields: any
    }
  ) => JSX.Element
  renderAddFormItem: (add: (defaultValue?: any, insertIndex?: number) => void) => JSX.Element
}
